<template>
  <div>
    <el-col :span="24" class="mb15">
      <el-button
        type="custom"
        plain
        @click="toBack()"
        style="
          float: right;
          width: 110px;
          margin-top: 10px;
          position: relative;
          z-index: 99;
        "
        >返回</el-button
      >
    </el-col>

    <el-row :gutter="20">
      <el-col :xs="12" :sm="8" :md="8" :lg="5"
        ><el-input
          placeholder="请输入名称"
          v-model="listQuery.deName"
          clearable
        >
        </el-input
      ></el-col>
      <el-col :xs="12" :sm="8" :md="8" :lg="5"
        ><el-input
          placeholder="请输入描述"
          v-model="listQuery.content"
          clearable
        >
        </el-input
      ></el-col>
      <!-- <el-col :xs="12" :sm="8" :md="8" :lg="5">
            <el-select
                v-model="listQuery.del"
                placeholder="请选择数据状态"
                clearable
                style="width: 100%"
            >
               <el-option  key="1"  label="可用"  value="1"> </el-option>
				<el-option  key="2"  label="不可用"  value="2"> </el-option>
            </el-select>
        </el-col> -->

      <el-col :xs="12" :sm="8" :md="8" :lg="7"
        ><el-button type="custom" plain @click="getList()">搜索</el-button>
        <el-button type="custom" @click="showEditDialog('add')">新增</el-button>
        <el-button type="custom" @click="showWhiteOrAudit()"
          >选择人员</el-button
        >
      </el-col>
    </el-row>

    <el-table :data="tableData" style="width: 100%" stripe v-loading="loading">
      <el-table-column fixed prop="deName" label="名称"> </el-table-column>
      <el-table-column prop="deValue" label="值"> </el-table-column>
      <el-table-column prop="content" label="描述"> </el-table-column>
      <!-- <el-table-column prop="del" label="状态">
                <template slot-scope="scope">
                <el-tag :type="scope.row.del | blackDelStyleFilter">
                    {{ scope.row.del | blackDelNameFilter }}</el-tag>
                </template>
            </el-table-column> -->
      <el-table-column prop="createTime" label="创建时间"> </el-table-column>
      <el-table-column prop="updateTime" label="修改时间"> </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="{ row }">
          <el-button-group>
            <el-button
              type="primary"
              size="mini"
              @click="showEditDialog('edit', row)"
              >编辑</el-button
            >
            <el-button type="danger" size="mini" @click="delDetail(row)"
              >删除</el-button
            >
          </el-button-group>
        </template>
      </el-table-column>
    </el-table>

    <Pagination
      style="margin-top: 20px"
      v-show="parseInt(pageObj.count) > 0"
      :total="parseInt(pageObj.count)"
      @change="getList"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
    />

    <el-dialog
      :title="addOrEdit ? '数据字典详情-新增' : '数据字典详情-编辑'"
      :visible.sync="dialogFormVisible"
      width="700px"
      @close="$reset('temp')"
      :close-on-click-modal="false"
    >
      <el-form ref="temp" :model="temp" :rules="rules" label-width="80px">
        <el-form-item label="名称" prop="deName">
          <el-input v-model="temp.deName"></el-input>
        </el-form-item>
        <el-form-item label="值" prop="deValue">
          <el-input v-model="temp.deValue"></el-input>
        </el-form-item>
        <el-form-item label="描述" prop="content">
          <el-input type="textarea" v-model="temp.content"></el-input>
        </el-form-item>
        <!-- <el-form-item label="特殊资源" prop="del">
                    <el-radio-group v-model="temp.del">
                        <el-radio label="1" >可用</el-radio>
                        <el-radio label="2" >不可用</el-radio>
                    </el-radio-group>
                </el-form-item> -->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button v-show="!addOrEdit" type="custom" @click="handleAdd('temp')"
          >提 交</el-button
        >
        <el-button v-show="addOrEdit" type="custom" @click="handleAdd('temp')"
          >新 增</el-button
        >
        <el-button @click="dialogFormVisible = false">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogWhiteOrAuditVisible"
      width="700px"
      class="dialog-wrap dialogWhiteOrAudit"
      :close-on-click-modal="modal"
      @close="$reset('wtemp')"
    >
      <el-form ref="wtemp" :model="temp" :rules="rules" label-width="80px">
        <el-table
          ref="multipleTable"
          :data="userTableData"
          style="width: 100%"
          height="440px"
          row-key="id"
        >
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column fixed prop="userName" label="用户">
          </el-table-column>
          <el-table-column fixed prop="account" label="登录名">
          </el-table-column>
          <el-table-column prop="deptName" label="部门"> </el-table-column>
          <el-table-column prop="roleString" label="角色"> </el-table-column>
          <el-table-column prop="sex" label="性别" width="70px">
            <template slot-scope="{ row }">
              {{ row.sex == 1 ? '男' : '女' }}
            </template>
          </el-table-column>
        </el-table>
        <Pagination
          style="margin-top: 20px"
          v-show="parseInt(pageObj2.count) > 0"
          :total="parseInt(pageObj2.count)"
          @change="getUserList"
          :page.sync="listQuery2.page"
          :limit.sync="listQuery2.limit"
        />
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button
          type="custom"
          v-preventReClick
          @click="showWhiteOrAuditdate('wtemp')"
          >提 交</el-button
        >
        <el-button @click="dialogWhiteOrAuditVisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  tbDictDetailQuery,
  tbDictDetailAdd,
  tbDictDetailUpdate,
  tbDictDetailDelete,
} from '@/api/admin/system/dictionaryDet.js'
import { tbSysUserQuery } from '@/api/admin/user/user-manage.js'
export default {
  created() {
    this.getList()
  },
  mounted() {},
  data() {
    return {
      temp: {},
      listQuery: {
        dictId: '',
        page: 1,
        limit: 10,
        content: '',
        deName: '',
      },
      tableData: [],
      pageObj: {},

      dataValue: '',
      loading: false,
      addOrEdit: true,
      dialogFormVisible: false,
      temp: {},
      rules: {
        deName: [
          { required: true, message: '请输入中文名称', trigger: 'blur' },
          {
            min: 1,
            max: 15,
            message: '长度在 1 到 15 个字符',
            trigger: 'blur',
          },
        ],
        deValue: [
          { required: true, message: '请输入值', trigger: 'blur' },
          {
            min: 1,
            max: 15,
            message: '长度在 1 到 15 个字符',
            trigger: 'blur',
          },
        ],

        del: [{ required: true, message: '请选择是否可用', trigger: 'change' }],
      },
      dialogWhiteOrAuditVisible: false,
      userTableData: [], //用户列表数据源
      pageObj2: {}, //用户分页数据源
      listQuery2: {
        page: 1,
        limit: 10,
        name: '',
      }, //用户列表查询条件
      dialogTitle: '选择人员',
      modal: false, //弹出框显示隐藏。
    }
  },
  components: {},
  methods: {
    //获取列表
    getList() {
      this.listQuery.dictId = this.$route.query.id
      this.loading = true
      tbDictDetailQuery(this.listQuery).then((res) => {
        this.tableData = res.data.data
        this.pageObj = res.data
        this.loading = false
      })
    },
    // 显示编辑弹出框
    showEditDialog(type, row) {
      if (type == 'add') {
        this.addOrEdit = true
      } else {
        this.addOrEdit = false
      }
      this.temp = { ...row }
      this.dialogFormVisible = true
    },
    //编辑
    handleAdd(temp) {
      this.$refs[temp].validate((valid) => {
        if (valid) {
          if (this.addOrEdit) {
            this.temp.dictId = this.listQuery.dictId
            tbDictDetailAdd(this.temp).then((res) => {
              if (res.data.code == 0) {
                this.$message.success('保存成功')
                this.dialogFormVisible = false
                this.getList()
              } else {
                this.$message.error(res.data.msg)
              }
            })
          } else {
            tbDictDetailUpdate(this.temp).then((res) => {
              if (res.data.code == 0) {
                this.$message.success('保存成功')
                this.dialogFormVisible = false

                this.getList()
              } else {
                this.$message.error(res.data.msg)
              }
            })
          }
        }
      })
    },
    // 新增
    addDeCode() {
      this.temp = {}
      this.dialogFormVisible = true
    },
    //删除
    delDetail(row) {
      this.temp = { ...row }
      this.$confirm('确认删除？删除之后不再恢复！')
        .then((_) => {
          tbDictDetailDelete(this.temp.id).then((res) => {
            if (res.data.code == 0) {
              this.$message.success(res.data.msg)

              this.getList()
            } else {
              this.$message.error(res.data.msg)
            }
          })
        })
        .catch((_) => {})
    },
    toBack() {
      //返回上一层

      this.$router.go(-1)
    },
    //显示白名单和审核人弹出框
    showWhiteOrAudit(type, row) {
      var data = { ...row }
      this.dialogWhiteOrAuditVisible = true

      this.getUserList()
      this.dialogTitle = '选择人员'
    },
    //白名单和审核人弹出框提交按钮点击
    showWhiteOrAuditdate() {
      //   const loading = this.openLoading();
      var arr = this.$refs.multipleTable.selection
      for (let obj of arr) {
        let ryxx = {
          dictId: this.listQuery.dictId,
          deName: obj.userName,
          //deValue:obj.id,//必须为int
          content: obj.id,
        }
        tbDictDetailAdd(ryxx).then((res) => {
          if (res.data.code == 0) {
            this.$message.success('保存成功')
            this.getList()
          } else {
            this.$message.error(res.data.msg)
          }
          //   loading.close();
        })
        this.dialogWhiteOrAuditVisible = false
      }
    },
    //查询所有用户
    getUserList() {
      tbSysUserQuery(this.listQuery2).then((res) => {
        for (let arr of res.data.data) {
          if (arr.hasOwnProperty('userRoleId')) {
            arr.userRoleId = arr.userRoleId.split(',')
          }
          let roleString = ''
          for (let menuObj of arr.menuRoleList) {
            roleString = roleString + menuObj.name + ','
          }
          for (let powerObj of arr.powerRoleList) {
            roleString = roleString + powerObj.name + ','
          }
          arr.roleString = roleString.slice(0, roleString.length - 1)
        }
        this.userTableData = res.data.data
        this.pageObj2 = res.data
      })
    },
  },
  filters: {
    typeFilter(data) {
      switch (data) {
        case '1':
          return '枚举'
        case '2':
          return '常量'
      }
    },
  },
}
</script>
